<template>
    <div>
        <input type="text" v-model.number="count" >
        <p>{{ count }}  乘以 2 的值为: {{ plus }} </p> 
        <p>{{ count }}  乘以 2 的值为: {{ plus }} </p> 
        <p>{{ count }}  乘以 2 的值为: {{ plus }} </p> 
        <!-- <p>{{ count }}  乘以 2 的值为: {{ plus() }} </p> 
        <p>{{ count }}  乘以 2 的值为: {{ plus() }} </p> 
        <p>{{ count }}  乘以 2 的值为: {{ plus() }} </p>  -->
    </div>
</template>

<script>
export default {
    name:'MyCounter',
    data(){
        return {
            count:1
        }
    },
    computed:{
        plus(){  // 计算属性的计算结果会被缓存,性能好
            console.log('计算属性被执行了')
            // 注意:计算属性侧重于得到一个计算的结果,因此计算属性中必须有return返回值
            return this.count * 2
        }
    },
    methods:{
        // plus(){  // 方法的计算结果无法被缓存,性能低
        //     console.log('方法被执行了')
        //     return this.count * 2 
        // }
    }
}
</script>

<style>

</style>